<template>
  <div style="width: 100vw;height: 100vh;overflow: hidden;display: flex">
    <div style="flex: 1">
      <el-image src="https://img.zcool.cn/community/01a02f5f03305ba801215aa007d3c2.jpg@2o.jpg"
                style="width: 100%;height: 100%;fit: cover" />
    </div>
    <div class="welcome-title">
      <div style="font-size: 30px">欢迎来到我的推文平台</div>
      <div style="font-size: 20px">在这里你可以看到我的推文文案，找到你心仪的小说</div>
    </div>
    <div style="width: 400px;background-color: white;display:flex;justify-content: center; align-items:center;z-index: 1">
     <router-view v-slot="{Component}">
       <transition name="el-zoom-in-center" mode="out-in">
         <component :is="Component" />
       </transition>
     </router-view>
    </div>
  </div>
</template>

<script>

</script>

<style scoped>
.welcome-title{
  position: absolute;
  bottom: 40px;
  left: 30px;
  color: white;
  text-shadow: 0 0 10px skyblue;
}
</style>